<template>
  <div class="left-chart-1">
    <template v-if="option.xAxis.data.length">
      <div class="lc2-header">
        本月累计灌装水单耗为：{{ monthUnitConsum }} 吨/吨
      </div>
      <CustomChart class="lc2-chart" :option="option" />
    </template>
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import CustomChart from "./CustomChart";
import { getLineWaterUseInfo } from "@/api/dashboard/blowIrriagtionSpinLine";
const lineLabelColor = "#ffffffeb";
export default {
  name: "LeftChart2",
  components: { CustomChart },
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    refreshKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      monthUnitConsum: 0,
      option: {
        color: ["#5470c6", "#91cc75", "#fac858", "#006efd"],
        grid: {
          bottom: 20,
        },
        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          //   label: {
          //     color: "#000000eb",
          //     backgroundColor: "#ffffff"
          //   }
          // },
          padding: [5, 10],
        },
        legend: {
          data: [
            {
              name: "产线产量",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              // icon: "path://M8,4 h24 q4,0 4,4 v24 q0,4 -4,4 h-24 q-4,0 -4,-4 v-24 q0,-4 4,-4",
              textStyle: {
                padding: [0, -6],
              },
            },
            {
              name: "产线灌装量",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              // icon: "path://M8,4 h24 q4,0 4,4 v24 q0,4 -4,4 h-24 q-4,0 -4,-4 v-24 q0,-4 4,-4",
              textStyle: {
                padding: [0, -6],
              },
            },
            {
              name: "灌装水单耗",
            },
            {
              name: "水单耗标准",
            },
          ],
          itemGap: 16,
          textStyle: {
            color: lineLabelColor,
          },
          // itemWidth: 15,
          itemHeight: 13,
        },
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: lineLabelColor,
            },
          },
          axisLabel: {
            color: lineLabelColor,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: "吨",
            nameTextStyle: {
              color: lineLabelColor,
            },
            position: "left",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: lineLabelColor,
              },
            },
            axisLabel: {
              color: lineLabelColor,
              hideOverlap: true,
            },
            axisTick: {
              show: false,
            },
            minInterval: 1,
          },
          {
            name: "吨/吨",
            nameTextStyle: {
              color: lineLabelColor,
            },
            position: "right",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: lineLabelColor,
              },
            },
            axisLabel: {
              color: lineLabelColor,
              hideOverlap: true,
            },
            axisTick: {
              show: false,
            },
            minInterval: 1,
          },
        ],
        series: [
          {
            name: "产线产量",
            data: [],
            type: "bar",
            label: {
              show: true,
              fontSize: 8,
              position: "top",
              color: lineLabelColor,
              rotate: -20,
              offset: [-6, 0],
            },
            barGap: 0,
            barWidth: "30%",
            yAxisIndex: 0,
          },
          {
            name: "产线灌装量",
            data: [],
            type: "bar",
            label: {
              show: true,
              fontSize: 8,
              position: "top",
              color: lineLabelColor,
              rotate: 20,
              offset: [6, 0],
            },
            barGap: 0,
            barWidth: "30%",
            yAxisIndex: 0,
          },
          {
            name: "灌装水单耗",
            data: [],
            type: "line",
            label: {
              show: true,
              fontSize: 8,
              position: "top",
              // color: lineLabelColor,
              color: "#ffff00",
              rotate: 0,
            },
            yAxisIndex: 1,
          },
          {
            name: "水单耗标准",
            data: [],
            type: "line",
            label: {
              show: true,
              fontSize: 8,
              position: "top",
              // color: lineLabelColor,
              color: "#378eff",
              rotate: 0,
            },
            // lineStyle: {
            //   width: 1
            // },
            yAxisIndex: 1,
          },
        ],
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      if (!this.lineItem) {
        return;
      }
      const param = {
        lineId: this.lineItem.value,
      };
      getLineWaterUseInfo(param).then((res) => {
        if (res?.data) {
          const {
            dayProduceWaters,
            dayConsumWater,
            dayUnitConsums,
            monthUnitConsum,
            dayStandUnitConsums
          } = res.data;
          if (dayProduceWaters) {
            // 横坐标
            this.option.xAxis.data = dayProduceWaters.map((ele) =>
              this.parseTime(ele.datetime, "{m}-{d}")
            );
            const toFix = this.toFix;
            // 产线产量
            this.option.series[0].data = dayProduceWaters.map((ele) =>
              toFix(ele.indexValue, 2)
            );
            // 产线灌装量
            this.option.series[1].data = dayConsumWater.map((ele) =>
              toFix(ele.indexValue, 2)
            );
            // 灌装水单耗
            this.option.series[2].data = dayUnitConsums.map((ele) =>
              toFix(ele.indexValue, 2)
            );
            // 水单耗标准
            this.option.series[3].data = dayStandUnitConsums.map((ele) =>
              toFix(ele.indexValue, 2)
            );
            // 本月灌装水单耗
            this.monthUnitConsum = toFix(monthUnitConsum || 0, 2);
          }
        }
      });
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getData();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .lc2-header {
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    text-align: center;
    margin-top: 30px;
  }

  .lc2-details {
    height: 40px;
    font-size: 16px;
    display: flex;
    align-items: center;
    text-indent: 20px;

    span {
      color: #096dd9;
      font-weight: bold;
      font-size: 35px;
      margin-left: 20px;
    }
  }

  .lc2-chart {
    flex: 1;
  }
}
.no-data {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
